import React, { useState, useEffect } from 'react'

import pageInfo from '../../pageConfigData/index'
import './index.scss'

let { nav } = pageInfo

export default function Header() {

    const [navCopy, setNavCopy] = useState(nav)
    const [navBgColor, setNavBgColor] = useState('')  // 导航栏背景色
    const [navColor, setNavColor] = useState('')  // 导航栏字体颜色
    const [navItemShowPopup, setNavItemShowPopup] = useState(false)  // 导航栏子项弹出

    const [linkDescribe, setLinkDescribe] = useState('')
    const [showNavIndex, setShowNavIndex] = useState(0)

    useEffect(() => {

    }, [])

    function navItemHover(showPopup, navItem, index) {
        // 移入当前不做处理
        if(navItemShowPopup === showPopup && index === showNavIndex) return
        setNavItemShowPopup(showPopup)
        if (showPopup) {
            setShowNavIndex(index)
            setNavBgColor(showPopup ? navItem?.popupsBackgroundColor : '')
            setNavColor(showPopup ? navItem?.popupsColor : '#fff')
        } else {
            setNavBgColor('#fff')
            setNavColor('')
            setLinkDescribe('')
        }
        setNavCopy([...nav])
        setLinkDescribe('')

    }

    function hoverLink(link) {
        setLinkDescribe(link.describe)
    }


    return (
        <>
            <nav className="navbar navbar-expand-lg navbar-light bg-light" style={{
                // backgroundColor: navBgColor || '',
                color: navColor
            }}>
                <a href='' className="logo flex-cen-cen">
                    {/* LOGO */}
                    {pageInfo.logo.label}
                </a>
                <ul className="navbar_nav" 
                    onMouseLeave={() => navItemHover(false)}
                >
                    {
                        navCopy.map((item, index) => (
                            <li className="nav_item" key={item.label} onMouseEnter={() => navItemHover(true, item, index)}
                            >
                                {item.label}
                            </li>
                        ))
                    }
                    <div
                        className="nav_item_popup"
                        style={{
                            backgroundColor: navBgColor,
                            color: navColor,
                            // height: navItemShowPopup ? '688px' : '0',
                            animationName: navItemShowPopup ? 'fadeInDown' : 'reverseFadeInDown',
                            visibility: navItemShowPopup ? 'visible' : 'hidden',
                        }}
                    >
                        <i className="border_top"></i>
                        <div className='nav_item_popup_content' style={{ display: navItemShowPopup ? '' : 'none', }}>
                            {
                                navCopy[showNavIndex].links.map((item, index) => (
                                    <div className="classify" key={index}>
                                        {/* 分类标题 */}
                                        <div className="classify_title">{item.name}</div>
                                        <ul>
                                            {item.links.map(child => (
                                                <li key={child.label} 
                                                    onMouseEnter={() => hoverLink(child)}
                                                >
                                                    <a className='link_item' href={child.href}>
                                                        <span>
                                                            {child.label}
                                                            <i className="after" style={{backgroundColor: navColor}}></i>
                                                        </span>
                                                    </a>
                                                </li>
                                                ))}
                                        </ul>
                                    </div>
                                ))
                            }
                            <div className="classify_show_more" style={{ display: linkDescribe ? '' : 'none', }}>

                                <div className="describe_title">内容</div>
                                <div className="describe_img">
                                    <img src="https://pic2.zhimg.com/v2-f6311f081a300d5be832ca58335154e4_r.jpg?source=1940ef5c" alt="" />
                                </div>
                                <div className="describe_content">
                                    {linkDescribe}
                                </div>
                                
                            </div>
                        </div>
                    </div>
                </ul>
            </nav>

        </>
    )
}
